<?php
include ('../../datos/general.php');
include ('../../datos/conexion.php');
validarSession('Admin');
?>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<script>
	var idSede='';
	
	$(function() {
		$( "#accordion" ).accordion({
			autoHeight: false,
			navigation: true
		});
	});
	
	function registroSede(){
			nombreSede=document.getElementById("campoNombreSede").value;
			campoUbicacionSede=document.getElementById("campoUbicacionSede").value;
			if(nombreSede!="" && campoUbicacionSede!=""){
				parametros="tipo="+encodeURIComponent("registrar")+"&nombreSede="+encodeURIComponent(nombreSede)+
						   "&ubicacionSede="+encodeURIComponent(campoUbicacionSede);
				cargar ("respuestaRegistroSede", "", "Admin/sedes/sedeFunciones.php", "POST", parametros, true, "");
			}
			else {
				document.getElementById("respuestaRegistroSede").innerHTML="Hay datos sin completar";
				}
		}
		
	function limpiarDatos(){
			document.getElementById("campoNombreSede").innerHTML="";
			document.getElementById("campoUbicacionSede").innerHTML="";	
			document.getElementById("respuestaRegistroSede").innerHTML="";			
		}
		
	function mostrarTabla(){
		$(".flexme3").flexigrid({
			url : 'Admin/sedes/sedeCargarTabla.php',
			dataType : 'xml',
			colModel : [{ display : 'Nombre', name : 'nombreSede', width : 160, sortable : true, align : 'left'}, 
						{display : 'Ubicación', name : 'ubicacionSede', width : 300, sortable : true, align : 'left'}],
			searchitems : [	{display : 'Nombre', name : 'nombreSede'}, 
							{display : 'Ubicación', name : 'ubicacionSede'} ],
			buttons : [ {name : 'Editar', bclass : 'edit',onpress : editar}],
			sortname : "nombre",
			sortorder : "asc",
			usepager : true,
			title : 'Sedes registradas',
			useRp : true,
			rp : 10,
			showTableToggleBtn : true,
			width : 500,
			height : 220,
			singleSelect: true
		});
		}
		
	function editar(com, grid){
		var items = $('.trSelected', grid);
			if(items.length>0){
				idSede= items[0].id.substr(3);
				nombreSede = $('td[abbr="nombreSede"] >div', items).html();
				ubicacionSede = $('td[abbr="ubicacionSede"] >div', items).html();
				$("#divEditar").show("slow");
				document.getElementById("editarNombreSede").value=nombreSede;
				document.getElementById("editarUbicacionSede").value=ubicacionSede;
				document.getElementById("editarSedeRespuesta").innerHTML="";
				document.getElementById("editarNombreSede").focus();
				document.location="#moverFinal";
			}
			else alert('Debe seleccionar un registro.');
		}
		
	function editarSede(){
			nombreSede=document.getElementById("editarNombreSede").value;
			campoUbicacionSede=document.getElementById("editarUbicacionSede").value;
			if(nombreSede!="" && campoUbicacionSede!=""){
				parametros="tipo="+encodeURIComponent("editar")+"&nombreSede="+encodeURIComponent(nombreSede)+
						   "&ubicacionSede="+encodeURIComponent(campoUbicacionSede)+"&idSede="+encodeURIComponent(idSede);
				cargar ("editarSedeRespuesta", "", "Admin/sedes/sedeFunciones.php", "POST", parametros, true, "");
			}
			else {
				document.getElementById("editarSedeRespuesta").innerHTML="Hay datos sin completar";
				}
		}
		
	function ocultarDiv(){
			$("#divEditar").hide("slow");
		}
	</script>

<table id="tablaContenedora">
	<tr>
    	<td  align="center">
        	<div class="demo">
				<div id="accordion">
                	<!--Visualizar Sedes-->
                	<h3>
                    	<a href="#" onclick="mostrarTabla();$('.flexme3').flexReload();">
                        	Ver sedes
                        </a>
                    </h3>
	                    <!-- Cargas lista de sedes en la tabla-->   
                        <div align="left" id="listaSede">
                        <table class="flexme3" style="display: none"></table>
                        <script>mostrarTabla();</script>
                         <div id="divEditar" style="-moz-border-radius: 10px;-webkit-border-radius: 10px; border: 1px solid #000000; display:none" >
                        	<h3 align="center">Edite información de la sede</h3>
                        	<table id="tablaEditar" align="center">
                            	<tr>
                                	<td align="right"><strong>Nombre:</strong></td>
                                    <td>
                                    	<input type="text" id="editarNombreSede" />
                                    </td>
                                </tr>
                            	<tr>
                                	<td align="right"><strong>Ubicación:</strong></td>
                                    <td>
                                    	<input type="text" id="editarUbicacionSede" />                                    
                                    </td>
                                </tr>
                            	<tr>
                                	<td colspan="2" align="right">
                                    	<button onclick="ocultarDiv()">Ocultar</button>
                                        <button id="editarBoton" onclick="editarSede()">Guardar cambios</button>
                                    </td>
                                </tr>
                                <tr>
                                	<td colspan="2" align="right"><label style="color:#F00" id="editarSedeRespuesta"></label></td>
                                </tr>
                                <tr align="right">
                                	<td>
                                    </td>
                                </tr>                                                
                            </table>
                        </div>             
                        </div> <!-- Div listaSede-->
                    <!--Registrar nueva sede-->
					<h3>
                    	<a href="#" onclick="limpiarDatos();">
							Registrar nueva sede
                        </a>
					</h3>
						<div id="registroSede">
                        	<table>
                            	<tr>
                                	<td align="right">
                                    	Nombre de sede:
                                    </td>
                                    <td style="color:#F00">
                                    	<input type="text" id="campoNombreSede"/>
                                    </td>
                                    <td style="color:#F00; vertical-align:top" align="left">*</td>
                                </tr>
                            	<tr>
                                	<td align="right">
                                    	Ubicación de sede:
                                    </td>
                                	<td style="color:#F00">
                                    	<input type="text" id="campoUbicacionSede" />
                                    </td>
                                    <td style="color:#F00; vertical-align:top" align="left">*</td>
                                </tr>
                                <tr align="right">
                                	<td colspan="2">
	                                    <button onclick="registroSede();">Registrar</button>
                                    </td>
                                </tr>   
                                <tr align="right">
                                	<td colspan="2" id="respuestaRegistroSede" style="color:#F00">
                                    </td>
                                </tr>                                                            
                            </table>
						</div><!-- Div registroSede-->
				</div><!-- Div acordion -->
			</div><!-- Div demo -->
		</td><!-- columna contenedora -->
	</tr><!-- fila contenedora -->
</table><!-- Tabla contenedora -->